<template>
  <div class="addWine">
    <div class="leftCont">
<!--      v-show="seachKey.trim() == ''"-->
      <div
           class="tabBut">
        <span v-for="(item, index) in wineType"
              :key="index"
              :class="{ act: index == keyInd }"
              @click="checkTypeHandle(index, item.id)">{{ item.name }}</span>
      </div>

      <div class="tabList">
        <div class="table"
             :class="{ borderNone: !wineList.length }">
          <div v-if="wineList.length == 0"
               style="padding-left: 10px">
            <template >
              <Empty />
            </template>
          </div>
          <el-checkbox-group v-if="wineList.length > 0"
                             v-model="checkedList"
                             @change="checkedListHandle">
            <div v-for="(item, index) in wineList"
                 :key="item.name + item.id"
                 class="items">
              <el-checkbox :key="index"
                           :label="item.name">
                <div class="item">
                  <span style="flex: 3; text-align: left">{{
                      item.wineName
                    }}</span>
                  <span>{{ item.status == 0 ? '停售' : '在售' }}</span>
                  <span>{{ (Number(item.price) ).toFixed(2)*100/100 }}</span>
                </div>
              </el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
      </div>
    </div>

    <div class="ritCont">
      <div class="tit">
        已选酒品({{ checkedListAll.length }})
      </div>
      <div class="items">
        <div v-for="(item, ind) in checkedListAll"
             :key="ind"
             class="item">
          <span>{{ item.wineName || item.name }}</span>
          <span class="price">￥ {{ (Number(item.price) ).toFixed(2)*100/100 }} </span>
          <span class="del"
                @click="delCheck(item.name)">
            <img src="./../../../assets/btn_clean@2x.png"
                 alt="">
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script >
import request from "@/utils/request";
import Empty from "@/components/Empty.vue";

export default {
  components: {Empty},
  props: {
    value: {
      type: Number,
      default: null,
    },
    checkList: {
      type: Array,
      default: function () { return []; }
    },
    // seachKey: {
    //   type: String,
    //   default: ''
    // }
  },
  data() {
    return {
      wineType: [],
      wineList: [],
      allWineList: [],
      wineListCache: [],
      keyInd: 0,
      searchValue: '',
      checkedList: [],
      checkedListAll: [],
      ids: new Set(),
    }
  },
  created() {
    this.init();
  },

  methods: {
    init() {
      // 酒单列表数据获取
      this.getWineType();
      // 初始化选项
      this.checkedList = this.checkList.map((it) => it.name);
      // 已选项的酒品-详细信息
      this.checkedListAll = this.checkList.slice().reverse();
    },
    getWineType() {
      request.get(`/admin/category/list/${1}`,).then((res) => {
        if (res.code === 1) {
          this.wineType = res.data;
          this.getWineList(res.data[0].id);
        } else {
          this.$message.error(res.msg);
        }
      }).catch( () =>{
        this.$message.error('获取酒类列表失败,请检查分类状态');
      });
    },
    getWineList(id) {
      request.get(`/admin/wine/list/${id}`,).then((res) => {
        if (res.code === 1) {
          if (res.data.length === 0) {
            this.wineList = [];
            return;
          }
          let newArr = res.data;
          newArr.forEach((n) => {
            n.wineId = n.id;
            n.copies = 1;
            // n.wineCopies = 1;
            n.wineName = n.name;
          });
          this.wineList = newArr;
          // 使用 if (!this.ids.has(id)) 条件判断当前处理的ID（id）是否已经存在于 this.ids 集合中。
          // 如果 this.ids 集合中不包含当前 id，说明这部分数据还未被添加到总列表中。
          // 此时，执行 this.allWineList = [...this.allWineList, ...newArr]; 这行代码，将新获取到的数据数组 newArr 合并到总的酒水列表 this.allWineList 中。
          //通过这样的逻辑，可以确保从不同分类获取的酒水列表不会重复添加到总列表，实现了数据去重和累积的功能。
          if (!this.ids.has(id)) {
            this.allWineList = [...this.allWineList, ...newArr];
          }
          this.ids.add(id);
        } else {
          this.$message.error(res.msg);
        }
      });
    },

    checkTypeHandle(ind, id) {
      this.keyInd = ind;
      this.getWineList(id);
    },

    checkedListHandle(value) {
      // 倒序展示 - 数据处理前反正，为正序
      this.checkedListAll.reverse();
      // value 是一个只包含酒品名的数组，需要从 wineList中筛选出 对应的详情
      // 操作添加酒品
      const list = this.allWineList.filter((item) => {
        let data;
        value.forEach((it) => {
          if (item.name === it) {
            data = item;
          }
        });
        return data;
      });
      // 编辑的时候需要与已有酒品合并
      // 与当前请求下的选择性 然后去重就是当前的列表
      const wineListCat = [...this.checkedListAll, ...list];
      let arrData = [];
      this.checkedListAll = wineListCat.filter((item) => {
        let allArrDate;
        if (arrData.length === 0) {
          arrData.push(item.name);
          allArrDate = item;
        } else {
          const st = arrData.some((it) => item.name === it);
          if (!st) {
            arrData.push(item.name);
            allArrDate = item;
          }
        }
        return allArrDate;
      });
      // 如果是减酒 走这里
      if (value.length < arrData.length) {
        this.checkedListAll = this.checkedListAll.filter((item) => {
          if (value.some((it) => it === item.name)) {
            return item;
          }
        });
      }
      this.$emit('checkList', this.checkedListAll);
      // 数据处理完反转为倒序
      this.checkedListAll.reverse();
    },
    open(done) {
      this.wineListCache = JSON.parse(JSON.stringify(this.checkList));
    },
    close(done) {
      // eslint-disable-next-line vue/no-mutating-props
      this.checkList = this.wineListCache;
    },
    delCheck(name) {
      const index = this.checkedList.indexOf(name);
      const indexAll = this.checkedListAll.findIndex((it) => it.name === name);

      this.checkedList.splice(index, 1);
      this.checkedListAll.splice(indexAll, 1);
      this.$emit('checkList', this.checkedListAll);
    },
  }
}

</script>
<style  scoped>
.addWine {
  padding: 0 20px;
  display: flex;
  line-height: 40px;
  .empty-box {
    img {
      width: 190px;
      height: 147px;
    }
  }

  .borderNone {
    border: none !important;
  }
  span,
  .tit {
    color: #333;
  }
  .leftCont {
    display: flex;
    border-right: solid 1px #efefef;
    width: 60%;
    padding: 15px;
    .tabBut {
      width: 110px;
      font-weight: bold;
      border-right: solid 2px #f4f4f4;
      span {
        display: block;
        text-align: center;
        cursor: pointer;
        position: relative;
      }
    }
    .act::after {
      content: ' ';
      display: inline-block;
      background-color: $mine;
      width: 2px;
      height: 40px;
      position: absolute;
      right: -2px;
    }
    .tabList {
      flex: 1;
      padding: 15px;
      height: 400px;
      overflow-y: scroll;
      .table {
        border: solid 1px #f4f4f4;
        border-bottom: solid 1px #f4f4f4;
        .items {
          border-bottom: solid 1px #f4f4f4;
          padding: 0 10px;
          display: flex;
          .el-checkbox,
          .el-checkbox__label {
            width: 100%;
          }
          .item {
            display: flex;
            padding-right: 20px;
            span {
              display: inline-block;
              text-align: center;
              flex: 1;
              font-weight: normal;
            }
          }
        }
      }
    }
  }
  .ritCont {
    width: 40%;
    .tit {
      margin: 0 15px;
      font-weight: bold;
    }
    .items {
      height: 338px;
      padding: 4px 15px;
      overflow: scroll;
    }
    .item {
      box-shadow: 0px 1px 4px 3px rgba(0, 0, 0, 0.03);
      display: flex;
      text-align: center;
      padding: 0 10px;
      margin-bottom: 20px;
      border-radius: 6px;
      color: #818693;
      span:first-child {
        text-align: left;
        color: #20232a;
        flex: 70%;
      }
      .price {
        display: inline-block;
        flex: 70%;
        text-align: left;
      }
      .del {
        cursor: pointer;
        img {
          position: relative;
          top: 5px;
          width: 20px;
        }
      }
    }
  }
}
</style>
